<template>
     <div class="shop-container">
         <!--优惠活动-->
         <transition name="fade">
         <div class="coupon-mask" v-show="shopShow">
             <div class="coupon">
                 <span class="closer" @click="shopShowOff">x</span>
                 <h2>优惠活动</h2>
                 <span class="coupon-list"><span class="conpon-left">满减</span>新用户下单立减7元</span><br>
                 <span class="coupon-list"><span class="conpon-left">特价</span>新用户下单立减7元</span><br>
                 <span class="coupon-list"><span class="conpon-left">满减</span>新用户下单立减7元</span><br>
                 <span class="coupon-list"><span class="conpon-left">特价</span>新用户下单立减7元</span><br>
                 <span class="coupon-list"><span class="conpon-left">满减</span>新用户下单立减7元</span><br>
                 <span class="coupon-list"><span class="conpon-left">特价</span>新用户下单立减7元</span><br>
                 <span class="coupon-list"><span class="conpon-left">特价</span>新用户下单立减7元</span>
             </div>
         </div>
         </transition>
        <div class="shop-header" :style='{ backgroundImage:`url(${info[1].image_url})`}' v-if="info[1]">
           <!--在三级表达式中，写到二级表达式没问题，
           但是写到三级表达式则要看初始值，要判断一下v-if 看值是否存在-->
        <span  class="mui-icon mui-icon-arrowleft mui-active"  @click="$router.back()">
        </span>
        <div class="img-block"></div>

        <div class="info_title">{{info[1].title}}</div>
        <div class="activity">
            <span class="content-tag">
                <span class="mini-tag">
                    {{ foodstypes.info.state }}
                </span>
            </span>
            <span class="activity-content" :class="supportClasses[foodstypes.support[0].type]">
                    {{ foodstypes.info.content }}
                </span>
             <span   @click="shopShowOff">{{ foodstypes.support.length }}个优惠</span>
        </div>

    </div>

     </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: "shopHeader",
        data(){
            return {
                supportClasses:['class-red','class-orange','class-yellow'],
                shopShow:false
            }
        },
        mounted(){
            this.$store.dispatch('getFoodstypes') //触发actions调用，写入actions的名字
            this.$store.dispatch('getShops')//不一定在shoplist.vue发请求
            this.$store.dispatch('getShopInfo')
        },
        methods:{
            shopShowOff(){
                this.shopShow = !this.shopShow
            }
        },
        computed:{
            ...mapState(['address','foodstypes','info']),
        },
    }
</script>

<style scoped lang="scss">
    .shop-container {
        height: 60px;
        position: relative;
        .fade-enter-active, .fade-leave-active{
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to{
            opacity: 0;
        }
        .coupon-mask {
            display: flex;
            text-align: center;
            position: absolute;
            padding-top: 100%;
            z-index: 99;
            width: 100%;
            height: 100%;
            background-color: rgba(29, 29, 29, 0.18);

                .coupon {
                    position: absolute;
                    overflow: scroll;
                    width: 100%;
                    height: 180px;
                    background: white;
                    border-top: 2px solid #5b5b60;
                    bottom: 0;
                    padding-top: 10px;

                    .closer {
                        position: absolute;
                        font-size: larger;
                        right: 3px;
                        top: 3px;
                    }

                    .coupon-list {
                        width: 100%;

                        .conpon-left {
                            padding-right: 10px;
                        }
                    }
                }
        }

        .shop-header {
            position: relative;
            margin-bottom: 40px;
            height: 40px;
            .img-block {
                position: absolute;
                width: 30px;
                height: 28px;
                background: #ec971f;
                left: 45%;
                top: 20px;
            }

            .info_title {
                text-align: center;
                margin-top: 30px
            }

            .activity {
                width: 78%;
                margin: 0 auto;
                display: flex;
                justify-content: left;

                .content-tag {
                    padding-right: 10px
                }

                .activity-content {
                    position: relative;
                    width: 50%
                }

                .activity-content:after {
                    position: absolute;
                    content: '';
                    width: 0;
                    height: 0;
                    border: 10px solid transparent;
                    border-left: 10px solid #f00;
                    left: 140%;
                }

                .class-red {
                    color: red
                }

                .class-yellow {
                    color: yellow
                }

                .class-orange {
                    color: #ec971f
                }
            }

        }
    }
</style>